<template>
    <div>
        <div class="top-z">
            <div class="top-left">
                <img src="@/public/images/logo1.png" alt="" class="logo">
                <ul class="top-menu">
                    <li v-for="(tm,index) in topManu" :key="index" v-bind:class="[changeId == index  ? 'border-li' : '']" @click="doClick(index,tm.menu)">{{tm.name}}</li>
                </ul>
            </div>
            <div class="top-right">
                <el-dropdown>
                    <span class="el-dropdown-link xinxi">
                        <div>
                            <el-avatar class="top-tx" >
                                <i class="el-icon-user"></i>
                            </el-avatar>
                        </div>
                        <div>
                            admin<i class="el-icon-arrow-down el-icon--right"></i>
                        </div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-key">修改密码</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'KitHeader',
        data(){
            return {
                changeId: 0
            }
        },
        props: {
            topManu: Array
        },
        methods: {
            utlto(i){
                this.$router.push(i)
            },
            doClick: function(index,menu){
                this.changeId = index;
                this.$emit('doclick',{
                    menu: menu
                });
            }
        }
    }
</script>

<style scoped>
    @import "header.css";

</style>
